<template>
  <el-drawer
    :title="refForm.id?$t('message.edit' ): $t('message.add' )"
    :close-on-click-modal="modalDialog"
    :close-on-press-escape="modalDialog"
    :visible.sync="showApplication"
    size="600px"
    @close="closeDrawer"
  >
    <el-form ref="ruleForm" :model="refForm" :rules="rules" label-width="auto" label-suffix="：">
      <el-form-item :label="$t('message.gzmc')" prop="name">
        <el-input
          v-model="refForm.name"
          maxlength="50"
          style="width: 100%;"
          :placeholder="$t('message.qsr') + $t('message.gzmc')"
        />
      </el-form-item>
      <el-form-item :label="$t('message.yjy')" prop="deposit">
        <el-input
          v-model="refForm.deposit"
          maxlength="50"
          style="width: 100%;"
          :placeholder="$t('message.qsr') + $t('message.yj')"
          oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
        />
      </el-form-item>
      <el-form-item :label="$t('message.sfbzy')" prop="price">
        <el-input
          v-model="refForm.price"
          maxlength="50"
          oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
          style="width: 40%;margin-right: 4%;"
          :placeholder="$t('message.qsr') + $t('message.dprice')"
        />
        <el-input
          v-model="refForm.time"
          maxlength="50"
          style="width: 26%;"
          :placeholder="$t('message.qsr') + $t('message.time')"
          oninput="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
        />
        <el-select v-model="refForm.timeType" :placeholder="$t('message.qxz')" style="width: 20%;">
          <el-option :label="$t('message.fenzhong')" value="m" />
          <el-option :label="$t('message.xiaoshi')" value="h" />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('message.mfsjfz')" prop="freeTime">
        <el-input
          v-model="refForm.freeTime"
          maxlength="50"
          style="width: 100%;"
          oninput="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
          :placeholder="$t('message.qsrmfsjmr0')"
        />
      </el-form-item>
      <el-form-item :label="$t('message.sort')" prop="sort">
        <el-input
          v-model="refForm.sort"
          maxlength="50"
          style="width: 100%;"
          :placeholder="$t('message.qsr') + $t('message.sort')"
          oninput="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
        />
      </el-form-item>
      <el-form-item :label="$t('message.status')">
        <el-switch
          v-model="refForm.status"
          :active-value="'1'"
          :inactive-value="'0'"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="closeDrawer">{{ $t('message.qx') }}</el-button>
        <el-button v-preventReClick :loading="subLoading" type="primary" @click="onSubmit">{{ $t('message.baocun') }}</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<script>
import {
  leaseRuleSaveOrUpdate
} from '@/api'
import store from '@/store'
export default {
  data() {
    return {
      title: '',
      showApplication: false,
      subLoading: false,
      modalDialog: store.getters.dialog,
      refForm: {},
      gzList: [],
      xyForm: {},
      rules: {
        name: [{ required: true, message: this.$t('message.qsr') + this.$t('message.gzmc'), trigger: 'blur' }],
        deposit: [{ required: true, message: this.$t('message.qsr') + this.$t('message.yj'), trigger: 'blur' }],
        price: [{ required: true, message: this.$t('message.qsr') + this.$t('message.dprice'), trigger: 'blur' }]
      }
    }
  },
  methods: {
    onSubmit() {
      const param = { ...this.refForm }
      param.venueId = sessionStorage.getItem('venueId')
      const that = this
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (!param.time) return this.$message.info(this.$t('message.qsr') + this.$t('message.time'))
          if (param.id) {
            that.subLoading = true
            leaseRuleSaveOrUpdate({ param: param })
              .then((res) => {
                // console.log(res)
                that.subLoading = false
                if (res.errorCode === '000000') {
                  that.$message.success(this.$t('message.editcg'))
                  setTimeout(() => {
                    that.$emit('close')
                  }, 300)
                }
              })
              .catch((er) => {
                that.subLoading = false
                console.log(er)
              })
          } else {
            that.subLoading = true
            leaseRuleSaveOrUpdate({
              param: param
            })
              .then((res) => {
                that.subLoading = false
                if (res.errorCode === '000000') {
                  that.$message.success(this.$t('message.addcg'))
                  setTimeout(() => {
                    that.$emit('close')
                  }, 300)
                }
              })
              .catch((err) => {
                that.subLoading = false
                console.log(err)
              })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    showClick(e) {
      this.showApplication = true
      this.refForm = e || { status: '0', timeType: 'm' }
      this.$nextTick(() => {
        this.$refs.ruleForm.clearValidate()
      })
    },
    closeDrawer() {
      this.$refs.ruleForm.clearValidate()
      this.showApplication = false
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";

</style>
